<template>
  <div class="top-waper">
    <div class="top-waper title">
      <img src="../../assets/images/binzhou/title-two.png" alt="" />
    </div>
    <div class="tab-list">
      <div class="tab-item">
        <span class="item-text" :class="[tabAvtive1 === 1 ? 'top-active' : '']" @click="clickTab(1)"
          >亮点机器人</span
        >
      </div>
      <div class="tab-item">
        <span class="item-text" :class="[tabAvtive1 === 2 ? 'top-active' : '']" @click="clickTab(2)"
          >效用机器人</span
        >
      </div>
      <div class="tab-item-long">
        <span class="item-text" :class="[tabAvtive1 === 3 ? 'top-active' : '']" @click="clickTab(3)"
          >应用最多系统</span
        >
      </div>
      <div class="tab-item">
        <span class="item-text" :class="[tabAvtive1 === 4 ? 'top-active' : '']" @click="clickTab(4)"
          >僵尸机器人</span
        >
      </div>
    </div>
    <div class="table-list">
      <div class="title-list">
        <div
          class="title-item"
          :class="[tabAvtive2 === '综合型' ? 'list-active' : '']"
          @click="tabSwitch('综合型')"
        >
          <span class="title-text">综合型机器人</span>
        </div>
        <div
          class="title-item"
          :class="[tabAvtive2 === '混合型' ? 'list-active' : '']"
          @click="tabSwitch('混合型')"
        >
          <span class="title-text">混合型机器人</span>
        </div>
        <div
          class="title-item"
          :class="[tabAvtive2 === '智能型' ? 'list-active' : '']"
          @click="tabSwitch('智能型')"
        >
          <span class="title-text">智能型机器人</span>
        </div>
        <div
          class="title-item"
          :class="[tabAvtive2 === '其它类' ? 'list-active' : '']"
          @click="tabSwitch('其它类')"
        >
          <span class="title-text">其他类机器人</span>
        </div>
      </div>
      <div class="top-list">
        <div class="top-head">
          <div class="top-item">序号</div>
          <div class="top-item">机器人名称</div>
          <div class="top-item">所属部门</div>
          <div class="top-item">所属专业</div>
          <div class="top-item">所属种类</div>
          <div class="top-item">亮点指数</div>
        </div>
        <div class="top-body">
          <div
            v-for="(row, index) in render.data"
            :key="index"
            class="line"
            @mouseover="test1"
            @mouseleave="test2"
          >
            <el-popover
              popper-class="robot-popover"
              placement="right"
              :offset="-200"
              :width="200"
              trigger="hover"
            >
              <robot-popover
                :score-json-string="row.score"
                :tab-avtive1="tabAvtive1"
              ></robot-popover>
              <template #reference>
                <div class="flex">
                  <div class="line-item">{{ index + 1 }}</div>
                  <div class="line-item robotName" @click="clickRobot(row)">{{
                    row.robotName
                  }}</div>
                  <div class="line-item">{{ row.department }}</div>
                  <div class="line-item">{{ row.major }}</div>
                  <div class="line-item">{{ row.category }}</div>
                  <div class="line-item">{{ row.highlightScore }}</div>
                </div>
              </template>
            </el-popover>
            <!-- <div class="flex">
              <div class="line-item">{{ index + 1 }}</div>
              <div class="line-item robotName" @click="clickRobot(row)">{{ row.robotName }}</div>
              <div class="line-item">{{ row.department }}</div>
              <div class="line-item">{{ row.major }}</div>
              <div class="line-item">{{ row.category }}</div>
              <div class="line-item">{{ row.highlightScore }}</div>
            </div> -->
          </div>
          <div v-if="mouseOverShow"> 你好啊 </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, onUnmounted, watch, ref, reactive } from 'vue'
  import type { HighlightRobotList } from '@/api/data'

  import RobotPopover from './robot-popover.vue'

  const props = defineProps({
    list: {
      type: Object as () => HighlightRobotList,
      default: () => ({})
    }
  })
  const render = reactive({ data: [] as HighlightRobotList['highlightRobotList4'] })
  let tabAvtive1 = ref<number>(1)
  let tabAvtive2 = ref<string>('综合型')
  const timer = ref<number>(100000)
  let intervalTime = ref<number>(15)
  let timeNum = ref<number>(30)
  let mouseOverShow = ref<boolean>(false)

  const times = () => {
    timer.value = setInterval(() => {
      tabAvtive1.value = tabAvtive1.value === 4 ? 1 : tabAvtive1.value + 1
      tabAvtive2.value = '综合型'
      timeNum.value--
      renderChart()
    }, intervalTime.value * 1000)
  }
  const tabSwitch = (type: string) => {
    tabAvtive2.value = type
    renderChart()
  }
  const renderChart = () => {
    getDataByAvtive()
  }

  const getDataByAvtive = () => {
    render.data = []
    switch (tabAvtive2.value) {
      case '综合型':
        switch (tabAvtive1.value) {
          case 1:
            render.data = props.list.highlightRobotList1
            break
          case 2:
            render.data = props.list.highlightRobotList2
            break
          case 3:
            render.data = props.list.highlightRobotList3
            break
          default:
            render.data = props.list.highlightRobotList4
            break
        }
        break
      case '混合型':
        switch (tabAvtive1.value) {
          case 1:
            render.data = props.list.highlightRobotList5
            break
          case 2:
            render.data = props.list.highlightRobotList6
            break
          case 3:
            render.data = props.list.highlightRobotList7
            break
          default:
            render.data = props.list.highlightRobotList8
            break
        }
        break
      case '智能型':
        switch (tabAvtive1.value) {
          case 1:
            render.data = props.list.highlightRobotList9
            break
          case 2:
            render.data = props.list.highlightRobotList10
            break
          case 3:
            render.data = props.list.highlightRobotList11
            break
          default:
            render.data = props.list.highlightRobotList12
            break
        }
        break
      default:
        switch (tabAvtive1.value) {
          case 1:
            render.data = props.list.highlightRobotList13
            break
          case 2:
            render.data = props.list.highlightRobotList14
            break
          case 3:
            render.data = props.list.highlightRobotList15
            break
          default:
            render.data = props.list.highlightRobotList16
            break
        }
        break
    }
  }

  // document.append(`<div id="tooltip"><div>' + $(this)[0].outerText + '</div></div>`)
  const test1 = () => {
    timer.value && clearInterval(timer.value)
  }

  const test2 = () => {
    times()
  }

  const clickRobot = (row: any) => {
    console.log('---clickRobot---', row)
    if (row.url) {
      window.open(row.url)
    }
  }

  const clickTab = (index: number) => {
    if (tabAvtive1.value != index) {
      timer.value && clearInterval(timer.value)
      tabAvtive1.value = index
      tabAvtive2.value = '综合型'
      renderChart()
      times()
    } else {
      timer.value && clearInterval(timer.value)
      times()
    }
  }

  watch(
    props,
    () => {
      renderChart()
    },
    {
      deep: true
    }
  )

  onMounted(() => {
    nextTick(() => {
      times()
    })
  })

  onUnmounted(() => {
    window.clearInterval(timer.value)
  })
</script>
<style lang="scss">
  .robot-popover {
    width: auto !important;
    background-color: rgba(10, 49, 75, 0.05) !important;
    background-image: url('@/assets/images/binzhou/popover-bg.png') !important;
    background-size: cover !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    // border-width: 3px !important;
    color: #fff !important;
    .el-popper__arrow:before {
      background-color: rgba(10, 49, 75, 0.3) !important;
    }
  }
</style>
<style lang="scss" scoped>
  .top-waper {
    width: 390px;
    height: 392px;
    .title {
      width: 359px;
      height: 42px;
      background-image: url('@/assets/images/binzhou/icon-two.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      margin-bottom: 22px;
      padding-top: 14px;
      padding-left: 19px;
      img {
        display: inline-block;
        height: 14px;
      }
    }
    .tab-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      color: #ffffff;
      font-family: Microsoft YaHei;
      margin-bottom: 20px;
      div {
        margin: 0;
        padding: 0;
      }
      .tab-item {
        width: 89px;
        height: 40px;
        opacity: 60%;
        background-image: url('@/assets/images/binzhou/top5-icon1.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        padding: 10px 9px;
        .item-text {
        }
      }
      .tab-item-long {
        width: 108px;
        height: 40px;
        opacity: 60%;
        background-image: url('@/assets/images/binzhou/top5-icon-long.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        padding: 10px 11px;
        .item-text {
        }
      }
    }
    .table-list {
      width: 390px;
      height: 267px;
      padding-top: 25px;
      background-image: url('@/assets/images/binzhou/top-table-box.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      .title-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 25px;
        .title-item {
          height: 26px;
          background-image: url('@/assets/images/binzhou/top5-icon2.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          text-align: center;
          display: flex;
          cursor: pointer;
          .title-text {
            display: inline-block;
            text-align: center;
            padding: auto;
            opacity: 60%;
            flex: 1;
            padding-top: 3px;
            font-size: 12px;
            color: #ffffff;
            transform: scale(0.8);
          }
        }
      }
      .top-list {
        width: 348px;
        margin-top: 16px;
        padding-left: 19px;
        .top-head {
          background-color: #1c4f75;
          width: 348px;
          height: 18px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          color: #00ffe3;
          display: flex;
          justify-content: space-around;
          align-items: center;
          .top-item {
            transform: scale(0.75);
            text-align: center;
            &:nth-child(1) {
              width: 24px;
            }
            &:nth-child(2) {
              width: 108px;
            }
            &:nth-child(3) {
              width: 48px;
            }
            &:nth-child(4) {
              width: 48px;
            }
            &:nth-child(5) {
              width: 48px;
            }
            &:nth-child(6) {
              width: 60px;
            }
            &:nth-child(7) {
              width: 60px;
            }
            &:nth-child(8) {
              width: 72px;
            }
          }
        }
        .top-body {
          width: 348px;
          .line {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #154162;
            margin-top: 12px;
            &:hover {
              background-color: #a48526;
            }
            .robotName {
              cursor: pointer;
            }
            .line-item {
              text-align: center;
              color: #ffffff;
              font-size: 12px;
              font-family: Microsoft YaHei;
              transform: scale(0.75);
              opacity: 0.8;
              &:nth-child(1) {
                width: 24px;
              }
              &:nth-child(2) {
                width: 108px;
              }
              &:nth-child(3) {
                width: 48px;
              }
              &:nth-child(4) {
                width: 48px;
              }
              &:nth-child(5) {
                width: 48px;
              }
              &:nth-child(6) {
                width: 60px;
              }
              &:nth-child(7) {
                width: 60px;
              }
              &:nth-child(8) {
                width: 72px;
              }
            }
          }
        }
      }
    }
  }
  .top-active {
    filter: brightness(1);
    color: #00ffe3 !important;
    opacity: 1 !important;
  }
  .list-active {
    height: 26px;
    color: #00fff0;
    background-image: url('@/assets/images/binzhou/active-icon1.png') !important;
  }
</style>
